<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-contract-html-container`]">
      <uv-parse :content="contractHtml"></uv-parse>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { contractShow, reserveClause } from './api'

export default {
  name: 'contract-html',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      contractHtml: '',
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getContract() {
      const { id } = this.$Route.query
      const data = await contractShow({ id })
      this.contractHtml = data
    },
    async getAgreement() {
      const { id } = this.$Route.query
      const data = await reserveClause({ id })
      this.contractHtml = data
    },
    async getData() {
      const { type } = this.$Route.query
      if (type == 'contract') {
        await this.getContract()
      } else if (type == 'agreement') {
        await this.getAgreement()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('contract-html-container')} {
  position: relative;
  background: #f5f5f5;
  padding: 15px;
}
</style>
